import React, { Component } from "react";
import styles from "./ShoppingCart.module.css";
import { appContext } from "../AppState";
interface Props {}
interface State {
  isOpen: boolean;
}
export default class ShopCart extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      isOpen: false,
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
    console.log(e.currentTarget);
    console.log(e.target);

    this.setState({ isOpen: !this.state.isOpen });
  }

  render() {
    const { isOpen } = this.state;
    return (
      <appContext.Consumer>
        {(value) => {
          return (
            <div className={styles.cartContainer}>
              <button className={styles.button} onClick={this.handleClick}>
            
                <span>购物车 {value.shoppingCart.items.length} (件)</span>
              </button>
              <div
                className={styles.cartDropDown}
                style={{
                  display:isOpen ? "block" : "none",
                }}
              >
                <ul>
                  {value.shoppingCart.items.map((i) => (
                    <li>{i.name}</li>
                  ))}
                </ul>
              </div>
            </div>
          );
        }}
      </appContext.Consumer>
      //   <appContext.Consumer>
      //     <div className={styles.cartContainer}>
      //       {/* <button
      //       className={styles.button}
      //       onClick={(e:React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
      //         this.setState({ isOpen: !isOpen });
      //       }}
      //     > */}
      //       <button className={styles.button} onClick={this.handleClick}>
      //         购物车 2 (件)
      //       </button>
      //       <div
      //         className={styles.cartDropDown}
      //         style={{
      //           display: isOpen ? "block" : "none",
      //         }}
      //       >
      //         <ul>
      //           <li>robot 1</li>
      //           <li>robot 2</li>
      //         </ul>
      //       </div>
      //     </div>
      //   </appContext.Consumer>
    );
  }
}
